<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Quản lý danh mục</title>
        <link rel="stylesheet" href="../../../public/css/screen.css" type="text/css" media="screen" title="default" />
        <link rel="stylesheet" href="../../../public/css/edit.css" type="text/css" media="screen" title="default" />
        <link rel="stylesheet" href="../../../public/js/jquery/jquery-ui.css"/>
        <style type="text/css">
            #frm_addcat label.error {
                width: auto;
                color: red;
                font-style: italic;
                font-size: 12px;
            }
        </style>
        <!--  jquery core -->
        <script src="../../../public/js/jquery/jquery-1.8.2.js" type="text/javascript"></script>
        <script src="../../../public/js/jquery/jquery-ui.js" type="text/javascript"></script>
        <!--  checkbox styling script -->
        <script src="../../../public/js/jquery/ui.core.js" type="text/javascript"></script>
        <script src="../../../public/js/jquery/ui.checkbox.js" type="text/javascript"></script>
        <script src="../../../public/js/jquery/jquery.bind.js" type="text/javascript"></script>

        <!-- start javascript for validate category-->
        <!--Javascrip code for validate form-->
        <script type="text/javascript" src="../../../public/js/jquery/jquery.validate.js"></script>
        <script type="text/javascript" src="../../../public/js/jquery/jquery.validate.pack.js"></script>
        <!-- end javascript for validate cateogry -->
        <script type="text/javascript">
            $(function(){
                $('input').checkBox();
                $('#toggle-all').click(function(){
                    $('#toggle-all').toggleClass('toggle-checked');
                    $('#frm_addcat input[type=checkbox]').checkBox('toggle');
                    return false;
                });
                
                //Jquery create by Loidd
                //Function reset form
                //                $('#btn_cat_submit').click(function(){
                //                    $('#frm_adduser')[0].reset();
                //                });
                
                //Function submit form
                $('#btn_cat_submit').click(function(){
                    $(this).validateFrmCat();
                    var result =  $("#frm_addcat").valid()
                    if(result){
                        $.ajax({
                            type:'POST',
                            url: 'action.php',
                            dataType:'json',
                            data:{
                                'catId': $('#catId').val(),
                                'catname': $('#cat_name').val(),
                                'cat_slug': $('#cat_slug').val(),
                                'cat_parent' : $('#cat_parent').val(),
                                'description': $('#description').val(),
                                'act':2
                            },
                            success: function(data){
                                if(data.html == true){
                                    $(window.location).attr('href', 'index.php');
                                }else{
                                    alert(data.html);
                                }
                            },
                            error: function(XMLHttpRequest, textStatus, errorThrown){
                                
                            }
                        });
                    }else{
                        return false;
                    }
                });
                
                //Function validate frm add category
                $.fn.validateFrmCat = function() { 
                    $("#frm_addcat").validate({
                        rules:{
                            cat_name:{
                                required:true,
                                minlength:3
                            }
                        },
                        messages:{
                            cat_name:{
                                required:"Vui lòng nhập tên danh mục",
                                minlength:"Số kí tự của danh mục tối thiểu là 3 ký tự"
                            }
                        }
                    });
                }
               
                //Function clear data when data success full
                $.fn.clearData = function(){
                    $("#cat_name").val('');
                    $("#cat_slug").val('');
                    $("#cat_parent").val('');
                    $("#description").val('');
                }

            });
            
        </script>  
        <![if !IE 7]>
        <!--  styled select box script version 1 -->
        <script src="../../../public/js/jquery/jquery.selectbox-0.5.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('.styledselect').selectbox({ inputClass: "selectbox_styled" });
            });
        </script>
        <![endif]>
        <!--  styled select box script version 2 --> 
        <script src="../../../public/js/jquery/jquery.selectbox-0.5_style_2.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('.styledselect_form_1').selectbox({ inputClass: "styledselect_form_1" });
                $('.styledselect_form_2').selectbox({ inputClass: "styledselect_form_2" });
            });
        </script>
        <!--  styled select box script version 3 --> 
        <script src="../../../public/js/jquery/jquery.selectbox-0.5_style_2.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('.styledselect_pages').selectbox({ inputClass: "styledselect_pages" });
            });
        </script>
        <!-- Custom jquery scripts -->
        <script src="../../../public/js/jquery/custom_jquery.js" type="text/javascript"></script>
        <!-- Tooltips -->
        <script src="../../../public/js/jquery/jquery.tooltip.js" type="text/javascript"></script>
        <script src="../../../public/js/jquery/jquery.dimensions.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function() {
                $('a.info-tooltip ').tooltip({
                    track: true,
                    delay: 0,
                    fixPNG: true, 
                    showURL: false,
                    showBody: " - ",
                    top: -35,
                    left: 5
                });
            });
        </script> 

        <!-- MUST BE THE LAST SCRIPT IN <HEAD></HEAD></HEAD> png fix -->
        <script src="../../../public/js/jquery/jquery.pngFix.pack.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $(document).pngFix( );
            });
        </script>

    </head>
    <body> 
        {banner}
        <div class="clear">&nbsp;</div>
        {menu}
        <div class="clear"></div>
        <!-- start content-outer ........................................................................................................................START -->
        <div id="content-outer">
            <!-- start content -->
            <div id="content">

                <!--  start page-heading -->
                <div id="page-heading">
                    <h1>Quản lý danh mục</h1>
                </div>
                <!-- end page-heading -->

                <table border="0" width="100%" cellpadding="0" cellspacing="0" id="content-table">
                    <tr>
                        <th rowspan="3" class="sized"><img src="../../../public/images/shared/side_shadowleft.jpg" width="20" height="300" alt="" /></th>
                        <th class="topleft"></th>
                        <td id="tbl-border-top">&nbsp;</td>
                        <th class="topright"></th>
                        <th rowspan="3" class="sized"><img src="../../../public/images/shared/side_shadowright.jpg" width="20" height="300" alt="" /></th>
                    </tr>
                    <tr>
                        <td id="tbl-border-left"></td>
                        <td>
                            <form id="frm_addcat">
                                <!-- start frm add category -->
                                {frm_edit_cat}
                                <!-- end frm add category -->
                            </form>
                        </td>
                        <td id="tbl-border-right"></td>
                    </tr>
                    <tr>
                        <th class="sized bottomleft"></th>
                        <td id="tbl-border-bottom">&nbsp;</td>
                        <th class="sized bottomright"></th>
                    </tr>
                </table>
                <div class="clear">&nbsp;</div>

            </div>
            <!--  end content -->
            <div class="clear">&nbsp;</div>
        </div>
        <!--  end content-outer........................................................END -->

        <div class="clear">&nbsp;</div>
        {footer}

    </body>
</html>
